<template>
  <div class="right-attribute-box">
    <Group title="预览效果设置">
      <div class="content-box">
        <div class="content-title">选择比赛</div>
        <a-select
          v-model:value="state1.competitionVal"
          @change="handleChangeCompetition"
        >
          <a-select-option
            :value="option.id"
            v-for="(option, index) in state1.competitionOptions"
            :key="index"
            >{{ option.title }}</a-select-option
          >
        </a-select>
        <a-select
          v-model:value="state1.langVal"
          @change="handleChangeCompetition"
        >
          <a-select-option
            :value="option.type"
            v-for="(option, index) in langOptions"
            :key="index"
            >{{ option.title }}</a-select-option
          >
        </a-select>
      </div>
      <div class="content-box margin-top">
        <div class="content-title">设置语言</div>
        <div class="default"></div>
      </div>
      <div class="content-box margin-top">
        <div class="content-title">显示尺寸</div>
        <div class="default"></div>
      </div>
      <div class="content-box margin-top">
        <div class="content-title">动作模拟</div>
        <div class="default"></div>
      </div>
    </Group>
    <Group title="视觉参数配置">
      <div class="content-box">
        <div class="content-title">主题风格</div>
        <div class="default"></div>
      </div>
      <div class="content-box margin-top">
        <div class="content-title">默认素材</div>
        <div class="default"></div>
      </div>
    </Group>
    <Group title="功能参数配置">
      <div class="content-box margin-top">
        <div class="content-title">操作栏（悬浮按钮）</div>
        <div class="default"></div>
      </div>
      <div class="content-box margin-top">
        <div class="content-title">事件弹窗</div>
        <div class="default"></div>
      </div>
      <div class="content-box margin-top">
        <div class="content-title">球员实时统计</div>
        <div class="default"></div>
      </div>
    </Group>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import Group from "./components/Group.vue";
import {
  EnumLangTypes,
  EnumActionTypes,
  EnumThemeStyleTypes,
  EnumLocationBgImgTypes,
  CompetitionOption,
} from "./common";
import imgOne from "./images/one.png";
import imgTwo from "./images/two.png";
import imgThree from "./images/three.png";

// #region 预览效果设置
const state1 = reactive({
  competitionVal: 0, // 选择的比赛-id
  competitionOptions: [] as CompetitionOption[], // 比赛赛程的列表
  langVal: EnumLangTypes.ZH, // 选择的语言-type
  sizeAutoState: true, // 是否开启屏幕自适应
  sizeInputVal: "1024", // 非自适应时的宽度
  motionSimulationVal: "", // 动作模拟-值
});
const langOptions = [
  { type: EnumLangTypes.ZH, title: "中文简体" },
  { type: EnumLangTypes.EN, title: "英文" },
]; // 语言的列表
const sizeInputValScope = {
  min: 375,
  max: 1024,
}; // 屏幕宽度的值范围
const motionSimulationOptions = [
  { type: EnumActionTypes.BALL_CONTROL, title: "控球" },
  { type: EnumActionTypes.BALL_GOAL, title: "进球" },
  { type: EnumActionTypes.BALL_CORNER, title: "角球" },
  { type: EnumActionTypes.BALL_SIDELINE, title: "边线球" },
  { type: EnumActionTypes.PERSON_CHANGE, title: "换人" },
  { type: EnumActionTypes.PERSON_OFFSIDE, title: "越位" },
  { type: EnumActionTypes.SHOT_POSITIVE, title: "射正" },
  { type: EnumActionTypes.SHOT_DEFLECTION, title: "射偏" },
  { type: EnumActionTypes.CARD_YELLOW, title: "黄牌" },
  { type: EnumActionTypes.CARD_RED, title: "红牌" },
  { type: EnumActionTypes.PERSON_INJURED, title: "受伤" },
  { type: EnumActionTypes.BALL_FREE, title: "任意球" },
  { type: EnumActionTypes.BALL_PENALTY, title: "点球大战" },
]; // 动作模拟-列表
// #endregion

// #region 视觉参数配置
const state2 = reactive({
  themeStyleVal: EnumThemeStyleTypes.CUSTOME, // 主题风格-值
  homeColorVal: "#109CEF", // 主队颜色
  awayColorVal: "#E3A000", // 客队颜色
  locationBgColorVal: "#E9E9E9", // 背景色
  fontColorVal: "#000000", // 文字色
  auxiliaryColorVal: "#000000", // 辅助色
  locationBgImgVal: 0, // 场地地面背景-值
  environmentBgImg: {}, // 环境背景图
  advertisementMainBgImg: {}, // 广告栏-主场地-图
  advertisementPenaltyBgImg: {}, // 广告栏-点球视角-图
  infoPreRaceBgImg: {}, // 信息面板-赛前-图
});
const themeStyleOptions = [
  { type: EnumThemeStyleTypes.CUSTOME, title: "定制色版本" },
  { type: EnumThemeStyleTypes.YEW_GOLD_BLACK, title: "耀金黑版本" },
]; // 主题风格-列表
const locationBgImgOptions = [
  {
    type: EnumLocationBgImgTypes.LOCATION_SYMPLE,
    title: "简约场地",
    url: imgOne,
  },
  {
    type: EnumLocationBgImgTypes.LOCATION_ILLUSTRATION,
    title: "插画场地",
    url: imgTwo,
  },
  {
    type: EnumLocationBgImgTypes.LOCATION_SIMULATION,
    title: "仿真场地",
    url: imgThree,
  },
]; // 场地地面背景-列表
// #endregion

onMounted(() => {
  initData();
});
//#region 初始化数据
const initData = () => {
  getCompetitions();
};
// 获取比赛赛程数据列表
const getCompetitions = () => {
  state1.competitionOptions = [
    { id: 1, title: "测试数据1" },
    { id: 2, title: "测试数据2" },
    { id: 3, title: "测试数据3" },
  ];
  state1.competitionVal = state1.competitionOptions[0].id;
};
//#endregion

// #region 操作
// #region 动画参数配置
const handleChangeCompetition = (id: number): void => {
  console.log(id);
  state1.competitionVal = id;
};
// #endregion

// #region 预览效果设置

// #endregion

// #region 视觉参数配置

// #endregion

// #region 动画参数配置
// #endregion
// #endregion
</script>

<style scoped lang="less">
.right-attribute-box {
  background-color: #fff;
  /* height: 100%; calc(100vh - 60px); */
  overflow-x: hidden;
  overflow-y: auto;
  width: 434px;
}
.margin-top {
  margin-top: 16px;
}
.content-box {
  .content-title {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 14px;
    color: #000000d9;
    font-weight: 500;
  }
  :deep(.ant-select) {
    width: 100%;
  }
}

.default {
  width: 100%;
  height: 30px;
  background-color: #dedede;
  border-radius: 4px;
}
</style>
